<load target="js/counter_admin.js" usecdn="true" />
<load target="counter.css" usecdn="true" />

<!--// datepicker javascript plugin load -->
<!--%load_js_plugin("ui.datepicker")-->

<script>
    function moveDate() {
		document.forms['calendar'].submit();
        return true;
    }
</script>

<div class="x_page-header">
	<h1>{$lang->counter} {$lang->cmd_management}</h1>
</div>

<form action="./index.php" method="get" name="calendar" id="fo_calendar" style="margin-bottom:30px">
    <input type="hidden" name="module" value="{$module}" />
    <input type="hidden" name="act" value="{$act}" />
    <input type="hidden" name="selected_date" id="selected_date" value="{zDate('Ymd',$selected_date)}" />

	<table class="x_table x_table-striped x_table-hover">
		<thead>
			<tr>
				<th scope="row">{$lang->total_counter}</th>
				<th scope="row"> 
					<span id="str_selected_date">{zdate($selected_date, "Y-m-d")}</span>
					<input type="hidden" class="inputDate" value="{zdate($selected_date,'Y-m-d')}" />
					<script>
					(function($){
						$(function(){
							var option = {
								changeMonth: true
								,changeYear: true
								,gotoCurrent: false
								,dateFormat:'yy-mm-dd'
								,yearRange:'-100:+10'
								,showOn:"button"
								,buttonImage:"./modules/counter/tpl/images/buttonCalendar.gif"
								,buttonImageOnly:false
								,mandatory:true
								,onSelect:function(){
									$("#str_selected_date").html(this.value);
									$("#selected_date").val(this.value.replace(/-/g,''));
									moveDate();
								}
							};
	
							$.extend(option,$.datepicker.regional['{$lang_type}']);
							$(".inputDate").datepicker(option);
						});
					})(jQuery);
					</script>
					<style scoped>
						.ui-datepicker-trigger{cursor:pointer;border:0;background:none;padding:0}
					</style>
				</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Visitor <strong>{number_format($total_counter->unique_visitor)}</strong> &nbsp;/&nbsp; Pageview : <strong>{number_format($total_counter->pageview)}</strong></td>
				<td>Visitor : <strong>{number_format($selected_day_counter->unique_visitor)}</strong> &nbsp;/&nbsp; Pageview : <strong>{number_format($selected_day_counter->pageview)}</strong></td>
			</tr>
		</tbody>
	</table>
</form>

<ul class="x_nav x_nav-tabs">
	<li loop="$lang->cmd_select_counter_type => $key, $val" class="x_active"|cond="$type==$key || (!$type && $key == 'hour')">
		<a href="{getUrl('type',$key)}">{$val}</a> 
	</li>
</ul>

<!-- 일자를 옮기는 form -->
<form action="./" method="get" id="fo_counter">
	<input type="hidden" name="module" value="{$module}" />
	<input type="hidden" name="act" value="{$act}" />
	<input type="hidden" name="selected_date" value="{$selected_date}" />
</form>

<!-- unique visitor 그래프 -->
<table class="x_table x_table-striped x_table-hover">
	<!--@foreach($detail_status->list as $key => $val)-->
		<!--@if($detail_status->sum>0)-->
			{@$percent   = sprintf("%0.2f", $val / $detail_status->sum * 100 )}
			{@$img_width = sprintf("%d", $val / $detail_status->max * 100 )}
		<!--@else-->
			{@$percent = 0}
			{@$img_width = 1}
		<!--@end-->
	<tr>
		<th scope="row" cond="Context::getLangType()=='en'"> <!--// 시간대별 -->
			<!--@if($type == 'year')-->
				{$key}
			<!--@elseif($type == 'month')-->
				{$key}
			<!--@elseif($type == 'day')-->
				{$key} {$lang->unit_day}
			<!--@else-->
				{$key}
			<!--@end-->
		</th>
		<th scope="row" cond="Context::getLangType()!='en'"> <!--// 시간대별 -->
			<!--@if($type == 'year')-->
				{$key} {$lang->unit_year}
			<!--@elseif($type == 'month')-->
				{$key} {$lang->unit_month}
			<!--@elseif($type == 'day')-->
				{$key} {$lang->unit_day}
			<!--@else-->
				{$key} {$lang->unit_hour}
			<!--@end-->
		</th>
		{@ $img_width = (int)$percent; $img_width = $img_width?$img_width.'%':'3px'; }
		<td>
			<div class="barContainer">
				<span class="graphHr" style="width:{$img_width}">
					<span>{number_format($val)}({$percent}%)</span>
				</span>
			</div>
		</td>
	</tr>
	<!--@end-->
</table>
